$(function(){
    //封装一个将输入框的内容传入本地储存的对象方法
        //添加数据
        functions = {
            addData:function (obj){
                //获取本地储存的数据 并且赋值给数据库dataBank
                var dataBank = util.getParam("dataBank");
                //将模态框内的值传给
                obj.Member = $(".Member").val();
                obj.GroupNickname = $(".GroupNickname").val();
                obj.QQnumber = $(".QQnumber").val();
                obj.sex = $(".sex").val();
                obj.QQage = $(".QQage").val();
                obj.GroupJoiningTime = $(".GroupJoiningTime").val();
    
                //判读localstorage里是否为null或者空，如果是就证明是第一次添加该用户，不需要更新数据库
                if (dataBank==null || dataBank=="") {
                    //定义一个对象 将input框内的值以json格式保存进这个对象
                    var jsonStr = {
                        "jsonData":[
                            {"Member":obj.Member,
                            "GroupNickname":obj.GroupNickname,
                            "QQnumber":obj.QQnumber,
                            "sex":obj.sex,
                            "QQage":obj.QQage,
                            "GroupJoiningTime":obj.GroupJoiningTime}
                        ],
                    };
                    //将获取到的值 转化为字符串 传入localstorage
                    util.setParam("dataBank",JSON.stringify(jsonStr));
                }
                //还要判断是不是第二次往后添加的数据，如果是 就将数据库的数据更新
                else{
                    /**
                     *      因为要更新本地存储的数据，之前的数据肯定是存在的不能替换，所
                     * 以要将之前的数据拿出来，就要转换为对象(parse方法)，再通过对象给后
                     * 来的数据添加在他后面
                     */
                    // alert("不是第一次添加用户");
                    var jsonStr = JSON.parse(dataBank);
                    var jsonData = jsonStr.jsonData;
                    //使用push方法给原来的数据末尾在加上又已经提交的数据
                    jsonData.push(
                            {"Member":obj.Member,
                            "GroupNickname":obj.GroupNickname,
                            "QQnumber":obj.QQnumber,
                            "sex":obj.sex,
                            "QQage":obj.QQage,
                            "sex":obj.sex,
                            "GroupJoiningTime":obj.GroupJoiningTime}
                    );
                    //将又读取到的添加到本地数据库
                    jsonStr.jsonData = jsonData;
                    //更新（之前的和又获取到的 一起加入本地数据库）
                    util.setParam("dataBank",JSON.stringify(jsonStr));
                }
            },

            AddPage:function(yxz){
                //将tbody节点从外边传进来，好让 添加的哪个元素 哪个元素有淡入效果
                var $tbody=$(yxz);
                $($tbody).fadeIn(500);
                //创建tr节点
                var $tr=$('<tr></tr>');
                //创建图片节点
                var $td = $("<td></td>");
                //将tr添加到tbody中
                $tr.appendTo($tbody);
                //将每个输入框中的内容循环全部添加到每个td节点中，在td节点添加到tr中
                $("#Establish .row input").each(function(){
                    var $td = $("<td></td>");
                    // var $img = $('<img src="/image/2.jpg" class="img-responsive" alt="Cinque Terre" width="20">')
                    // $img.appendTo($td);
                    $td.append($(this).val());
                    $td.appendTo($tr);
        
                })
                //添加修改/删除按钮
                var $td=$('<td><a id="ToUpdata" class ="ToUpdata" type="button" data-toggle="modal" data-target="#myModal" href="javascript:;">更新</a>&nbsp;/<a href="javascript:;" class ="del">移除</a></td>');
                $td.appendTo($tr);
                //所有添加完成，再将tbody添加到表格中
                $tbody.appendTo("table");
            }
        
        }

    
    //初始化input框的值
    function init(){
        $("input").val("");
    }

    //点击添加用户按钮初始化所有input输入框
    $("#addusernamebtn").click(function(){
        init();
        $("#addbtn").removeClass("updata").addClass('Submit');
    })

    //将用户填写的信息添加在表格中

    //正则验证函数，所有输入框内容全部通过，就将输入框内的所有内容上传至localstorage，并添加到页面的表格中
    function msg(){
        let Member = $(".Member").val();
        let GroupNickname = $(".GroupNickname").val();
        let QQnumber = $(".QQnumber").val();
        let sex = $(".sex").val();
        let QQage = $(".QQage").val();
        let GroupJoiningTime = $(".GroupJoiningTime").val();
        //全字母
        let reg_user = /^[\u0391-\uFFE5]+$/; 
        //非法字符
        let illegal= /[^\w\u4e00-\u9fa5]/g;
        //全数字
        let reg_number = /^[0-9]*$/;
        //验证性别
        let reg_sex = /^男$|^女$/;
        // console.log(reg_sex.test(sex));
        //昵称的输入规则
        //昵称的输入规则
        //昵称的输入规则
        if(Member == ""){
            alert("🔒昵称不能为空");
            result = false;
        }else if(Member.length > 15 ){
            alert("🔒您输入昵称的长度大于15，请重新输入");
            result = false;
        }else if(illegal.test(Member)){
            alert("🔒昵称存在非法字符");
            result = false;
        }
        // //群昵称的输入规则
        // //群昵称的输入规则
        // //群昵称的输入规则
        else if(GroupNickname == ""){
            alert("🔒群昵称不能为空‍");
            result = false;
        }else if(GroupNickname.length > 13){
            alert("🔒群昵称的长度大于13，请重新输入");
            result = false;
        }else if(!reg_user.test(GroupNickname)){
            alert("🔒群昵称格式错误");
            result = false;
        }else if(illegal.test(Member)){
            alert("🔒群昵称存在非法字符");
            result = false;
        }
        // //QQ号的输入规则
        // //QQ号的输入规则
        // //QQ号的输入规则
        else if(QQnumber == ""){
            alert("🔒QQ号不能为空‍");
            result = false;
        }else if(illegal.test(QQnumber)){
            alert("🔒QQ号存在非法字符");
            result = false;
        }else if(!reg_number.test(QQnumber)){
            alert("🔒QQ号必须全是数字");
            result = false;
        }else if(QQnumber.length < 6 || QQnumber.length >10){
            alert("🔒QQ号长度要在6-10之间");
            result = false;
        }
        // //性别输入规则
        // //性别输入规则
        // //性别输入规则
        else if(sex == ""){
            alert("🔒性别不能为空");
            result = false;
        }else if(!reg_sex.test(sex)){
            alert("🔒性别格式错误");
            result = false;
        }
        //Q龄输入规则
        //Q龄输入规则
        //Q龄输入规则
        else if(QQage == ""){
            alert("🔒Q龄不能为空");
            result = false;
        }else if(illegal.test(QQage)){
            alert("🔒群昵称存在非法字符");
            result = false;
        }
        else if(QQage > 20+"年"){
            alert("🔒Q龄格式错误");
            result = false;
        }
        else if (QQage < 20  && QQage!=QQage+"年"){
            alert("🔒Q龄格式错误");
            result = false;
        }
        //入群时间输入权限a
        else if(GroupJoiningTime == ""){
            alert("🔒入群时间不能为空");
            result = false;
        }else if(illegal.test(GroupJoiningTime)){
            alert("🔒入群时间存在非法字符");
            result = false;
        }else if(GroupJoiningTime.length>8 || GroupJoiningTime.length<8){
            alert("🔒入群时间请填写规范");
            result = false;
        }else{
            result = true;
        }
    }
    
    //点击添加按钮，将信息储存在loaclstorage，并将提交的信息显示在表格内
    $(document).on("click",".Submit",function(){
        var yxz ="<tbody></tbody>";
        msg();
        if(result){
            functions.AddPage(yxz);
            $("#myModal").modal('hide');
            functions.addData(indata);
            console.log("用户添加成功");
        }
        console.log("submit");
    })

})